<template>
    <div class="header">
        <div class="block">
            <div class="welcome">欢迎 番茄</div>
            <a-dropdown :arrow="{pointAtCenter: true}">
                <a-avatar :size="48">
                    <template #icon><UserOutlined /></template>
                </a-avatar>
                <template #overlay>
                    <a-menu>
                        <a-menu-item>
                            <div @click="handleExit" href="javascript:;">退出登录</div>
                        </a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {useRouter} from "vue-router";
import {UserOutlined} from "@ant-design/icons-vue";
import {navPath} from "@/router/config.ts";

const nav = useRouter();

const handleExit = () => {
    console.log("退出登录");
    nav.replace(navPath.login);
};
</script>

<style lang="less" scoped>
.header {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
}
.block {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.welcome {
    margin-right: 10px;
}
</style>
